<template>
  <div>
    <el-row style="background: white">
      <el-col :span="24">
        <div class="tbUpDiv"><img src="src/public/imgs/3~~~13A7E$84RV~7O3L6@F1.png" class="tbImg">
          <span class="tbUpPost">预算审批</span>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col>
        <div style="display: flex">
          <div style="width: 16%">
            <div style="text-align: center;padding:15px 30px;border-bottom:1px solid gainsboro;">全部类型</div>
            <div style="padding: 20px 10px 0px 10px">
              <el-input
                  v-model="input2"
                  class="w-50 m-2"
                  :suffix-icon="Search"
              />
              <el-tree style="margin-top: 20px"
                       default-expand-all
                       :data="data" :props="defaultProps" @node-click="handleNodeClick" />
            </div>
          </div>
          <div style="width: 84%">
            <div>
              <el-tabs v-model="activeName" class="demo-tabs">
                <el-tab-pane label="待处理" name="floor">

                  <div class="hodiv" style="display: flex;padding: 20px; ">
                    <div style="display:flex;width: 100%;border: 1px solid gainsboro">
                      <div style="width:100%;border-right:1px solid gainsboro;">
                        <el-row>
                          <el-col>
                            <el-table :data="tableData" style="width: 100%">
                              <el-table-column prop="booksId" type="selection" width="60"/>
                              <el-table-column prop="name" label="标题" width="130" />
                              <el-table-column prop="sex" label="类型" width="130" />
                              <el-table-column prop="address" label="节点" width="130" />
                              <el-table-column prop="where" label="填写人" width="130" />
                              <el-table-column prop="steta" label="发起人" width="180" />
                              <el-table-column prop="timet" label="到达时间" width="180" />
                              <el-table-column prop="ddzt" label="截止时间" width="180" />

                            </el-table>
                          </el-col>
                        </el-row>
                        <div>

                          <div style="width: 249px;height: 260px;" id="container" ref="chart"></div>

                          <div>


                          </div>
                        </div>
                      </div>

                    </div>
                  </div>
                  <div style="display: flex;padding: 20px;justify-content: space-between;">


                  </div>

                </el-tab-pane>


                <el-tab-pane label="已办" name="floor2">
                  <el-card>
                    <el-row>
                      <el-col>
                        <el-table :data="tableData" style="width: 100%">
                          <el-table-column prop="booksId" type="selection" width="60"/>
                          <el-table-column prop="name" label="标题" width="130" />
                          <el-table-column prop="sex" label="类型" width="130" />
                          <el-table-column prop="address" label="节点" width="130" />
                          <el-table-column prop="where" label="填写人" width="130" />
                          <el-table-column prop="steta" label="发起人" width="180" />
                          <el-table-column prop="timet" label="到达时间" width="180" />
                          <el-table-column prop="ddzt" label="截止时间" width="180" />

                        </el-table>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-tab-pane>

                <el-tab-pane label="未到达" name="floor3">
                  <el-card>
                    <el-row>
                      <el-col>
                        <el-table :data="tableData" style="width: 100%">
                          <el-table-column prop="booksId" type="selection" width="60"/>
                          <el-table-column prop="name" label="标题" width="130" />
                          <el-table-column prop="sex" label="类型" width="130" />
                          <el-table-column prop="address" label="节点" width="130" />
                          <el-table-column prop="where" label="填写人" width="130" />
                          <el-table-column prop="steta" label="发起人" width="180" />
                          <el-table-column prop="timet" label="到达时间" width="180" />
                          <el-table-column prop="ddzt" label="截止时间" width="180" />

                        </el-table>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-tab-pane>

                <el-tab-pane label="全部" name="floor4">
                  <el-card>
                    <el-row>
                      <el-col>
                        <el-table :data="tableData" style="width: 100%">
                          <el-table-column prop="booksId" type="selection" width="60"/>
                          <el-table-column prop="name" label="标题" width="130" />
                          <el-table-column prop="sex" label="类型" width="130" />
                          <el-table-column prop="address" label="节点" width="130" />
                          <el-table-column prop="where" label="填写人" width="130" />
                          <el-table-column prop="steta" label="发起人" width="180" />
                          <el-table-column prop="timet" label="到达时间" width="180" />
                          <el-table-column prop="ddzt" label="截止时间" width="180" />

                        </el-table>
                      </el-col>
                    </el-row>
                  </el-card>
                </el-tab-pane>





              </el-tabs>

            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script lang="ts" setup>
import {reactive, ref} from "vue";
import {onBeforeMount, onMounted} from "@vue/runtime-core";
import {Search} from "@element-plus/icons-vue"
import {useStore} from "vuex";
import * as echarts from "echarts";
import moment from "moment"
//人员组织搜索框
const input2 = ref('');

const defaultProps = {
  children: 'children',
  label: 'label',
}

//tabs默认选中第一个
const activeName="floor"

//1.通过vue3.x中的refs标签用法，获取到container容器实例
const chart = ref(null);
//2.定义在本vue实例中的echarts实例
let myEcharts = reactive({
  setOption(option: { legend: {
      top: string; left: string };
    series: { data: { name: string; value: number }[];
      avoidLabelOverlap: boolean;
      emphasis: { label: { show: boolean; fontSize: string; fontWeight: string } }; y: string;
      label: { show: boolean; position: string }; labelLine: { show: boolean }; type: string;
      radius: string[] }[]; tooltip: { trigger: string } }) {

  },
  resize() {

  }
});
let option = {
  tooltip: {
    trigger: 'item'
  },
  legend: {
    top: '5%',
    left: 'center'//位置
  },

};
//onMounted钩子函数
onMounted(()=>{
  //初始化echarts
  init();
})
//初始化echarts实例方法
const init = ()=> {
  //3.初始化container容器
  myEcharts = echarts.init(chart.value);

  //additional：图表大小自适应窗口大小变化
  window.onresize = () => {
    myEcharts.resize();
  }
}

</script>

<style scoped>
.tbUpDiv{
  width: 100%;
  border-top: 1px solid gainsboro;
  border-bottom: 1px solid gainsboro;
  position: relative;
}
.tbImg{
  margin-left: 30px;
  margin-top: 15px;
}
.tbUpPost{
  position: relative;
  top: -19px;
  left: 20px;
}
.icondiv{
  display: flex;margin: 0px 10px
}
</style>